<script setup>
import LayoutNav from '../Layout/components/LayoutNav.vue';
import LayoutFooter from '../Layout/components/LayoutFooter.vue';
import { ref } from 'vue';
const goods = {
    pictures: [
      "https://img.diytrade.com/smimg/122287/49109630-11319999-0/%E8%A1%AC%E8%A1%AB/2977.png",
      "https://img.diytrade.com/smimg/122287/49109632-11320001-0/%E8%A1%AC%E8%A1%AB/284c.png",
      "https://img.diytrade.com/smimg/122287/49109633-11320002-0/%E8%A1%AC%E8%A1%AB/ea04.png"
    ],
  mainPictures: [
    "https://img.diytrade.com/smimg/122287/49109630-11319999-0/%E8%A1%AC%E8%A1%AB/2977.png",
    "https://img.diytrade.com/smimg/122287/49109632-11320001-0/%E8%A1%AC%E8%A1%AB/284c.png",
    "https://img.diytrade.com/smimg/122287/49109633-11320002-0/%E8%A1%AC%E8%A1%AB/ea04.png"
  ],
  name: "清爽舒适，青年格子衬衫",
  desc: "这款格子衬衫采用优质抓绒材质，保暖又舒适，独特的花纹设计。",
  price: 150,
  nickname: '张三',
  target: 10000,
  startime: '2023-07-01',
  endtime: '2023-10-01',

};
// const goods = ref({})
const ProjectDetail = () => {
  
}

const searchItems = () => {
}


//众筹详情标签
const activeName = ref('first')

//商品数量count
const count = ref(1)
const countChange = (count) => {
  console.log(count)
}

</script>

<template>
    <LayoutNav/>
    <div class="container">
        <div class="header-box">
        <div class="logo">
        <RouterLink to="/">桃禧</RouterLink>
        </div>
        <p>众筹浏览</p>
        <div class="search-box">
            <el-input 
            placeholder="搜索众筹" 
            size="big" 
            clearable ></el-input>
            <el-button 
            type="primary" 
            size="big"
            @click="searchItems">
            搜索
            <i class="iconfont icon-search"></i>
        </el-button>
        </div>
    </div>
    </div>
    <div class="container">
      <div class="goods-page">
      <!-- 众筹信息 -->
      <div class="info-container">
        <div>
          <div class="goods-info">
            <div class="media">
              <!-- 图片预览区 -->
              <ImageView :image-list="goods.mainPictures"/> 
            </div>
            <div class="spec">
              <!-- 众筹信息区 -->
              <p class="g-name"> {{ goods.name }} </p>
              <p class="g-desc">{{ goods.desc }} </p>
              <p class="g-desc">发起人{{ goods.nickname }} </p>
              <p class="g-desc">目标金额{{ goods.target }} </p>
              <p class="g-desc">众筹持续时间{{ goods.startime }}-{{ goods.endtime }} </p>
              <p class="g-price">
                <span> {{ goods.price }}</span>
              </p>
              <div class="data-list">
                <el-col :span="6">
                  <el-statistic title="当前筹款" :value="4500" />
                </el-col>
                <el-col :span="6">
                  <el-statistic title="参与人数" :value="120" />
                </el-col>
                <el-col :span="6">
                  <el-statistic title="剩余天数" :value="30" />
                </el-col>                
              </div>
              <el-input-number v-model="count"  @change="countChange" class="count"/>
              <!-- 按钮组件 -->
              <div>
                <el-button size="large" class="btn" type="primary">
                  参与众筹
                </el-button>
              </div>
            </div>
          </div>
          <div class="goods-footer">
              <!-- 商品详情 -->
              <div class="goods-tabs">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" tab-position="left">
                  <el-tab-pane label="详细描述" name="first">
                  <div class="goods-detail">
                      <p class="title">项目介绍</p>
                      <p class="desc">
                        欢迎来到我们的环保T恤系列！我们使用100%有机棉和回收材料，致力于创造舒适、时尚且对环境友好的服装。我们的设计灵感来自自然，希望让每个人在时尚与可持续之间找到完美平衡。
                      </p>
                      <p class="title">
                        视觉元素
                      </p>
                      <p class="desc">
                        主图：展示T恤的高质量图片，模特穿着展示不同颜色和尺码。<br>
                        副图：包含设计师讲解、制作过程的花絮，强调环保理念以及对比传统服装的环保优势。
                      </p>
                      <p class="title">
                        团队介绍
                      </p>
                      <p class="desc">
                        创始人：张三<br>
                        设计师，拥有10年时尚设计经验，曾为多个品牌工作，热衷于推动可持续发展。<br>
                        团队成员：包括环保专家、市场推广专员和客户服务团队。
                      </p>
                      <p class="title">厂家介绍</p>
                      <p class="desc">
                        我们的T恤由位于深圳的“绿色服装工厂”生产。该工厂专注于可持续时尚，采用环保材料和低能耗生产工艺，确保每一件产品在减少碳足迹的同时，保持高质量标准。工厂拥有先进的设备和专业的团队，确保每个订单都能精准完成，并遵循公平劳动的原则。我们与工厂保持密切合作，定期检查生产过程，以确保符合我们的环保承诺。
                      </p>
                    <img v-for="img in goods.pictures" :src="img" :key="img" alt="">
                  </div>
                  </el-tab-pane>
                  <el-tab-pane label="众筹方式" name="second">
                  <div class="goods-detail">
                    <p class="title">筹款目标</p>
                    <p class="desc">
                      目标金额：$10,000<br>
                      资金用途：材料采购、生产费用和市场推广。
                    </p>
                    <p class="title">项目时间线</p>
                    <p class="desc">
                      筹款期：2024年9月1日 - 2024年10月1日<br>
                      生产开始：2024年10月15日<br>
                      发货时间：预计2024年12月15日</p>
                    <p class="title">众筹要求</p>
                    <p class="desc">我们需要至少100件订单才能开始生产这款环保T恤。每位支持者可以选择不同的颜色和印花设计。</p>
                  </div>
                  </el-tab-pane>
                  <el-tab-pane label="常见问题" name="third">
                    <div class="questions">
                      <h3>常见问题</h3>
                      <ul>
                        <li>
                          <strong>众筹的最低起订量是多少？</strong>
                          <p>我们的最低起订量为100件，达到这个数量后将开始生产。</p>
                        </li>
                        <li>
                          <strong>如果众筹未成功，我的资金会怎样？</strong>
                          <p>如果众筹未达到目标，您的资金将全额退款。</p>
                        </li>
                        <li>
                          <strong>可以更改我的定制选项吗？</strong>
                          <p>在众筹结束前，您可以随时修改您的选择。</p>
                        </li>
                        <li>
                          <strong>预计的发货时间是多久？</strong>
                          <p>一旦众筹成功，预计在生产完成后约6-8周内发货。</p>
                        </li>
                        <li>
                          <strong>如何确保我的订单隐私？</strong>
                          <p>我们承诺保护您的个人信息，不会将其分享给第三方。</p>
                        </li>
                      </ul>

                      <h3>风险提示</h3>
                      <ol>
                        <li>
                          点击“参与众筹”，即表明您已阅读并同意《支持者协议》及《隐私政策》，并自愿承担众筹相应风险。
                        </li>
                        <li>
                          您参与众筹是支持将创意变为现实的过程，而不是直接的商品交易，因此存在一定风险。请您根据自己的判断选择、支持众筹项目。众筹存在于发起人与支持者之间，众筹网作为第三方平台，只提供网络空间、技术支持等服务。众筹的回报产品和承诺由发起人提供和作出，发起者和支持者应依法承担使用众筹网产品产生的法律后果。
                        </li>
                        <li>
                          众筹项目的回报发放及其他后续服务事项均由发起人负责。如果发生发起人无法发放回报、延迟发放回报、不提供回报后续服务等情形，您需要直接和发起人协商解决。
                        </li>
                        <li>
                          由于发起人能力和经验不足、市场风险、法律风险等各种因素，众筹可能失败。对于在众筹期限届满前失败的项目，您支持项目的款项会全部原路退还给您；对于众筹成功的项目，支持者不能通过众筹网平台申请退款，若此时支持者因任何原因希望退款，需直接与发起者协商，若发起者同意退款，需直接向支持者退回款项，众筹网不会从可结算款项中扣除该部分退款金额。您对项目发起人的无偿支持以及额外打赏，一旦众筹成功将不予退款，但众筹失败的情况除外。
                        </li>
                      </ol>
                    </div>
                  </el-tab-pane>
                </el-tabs>
            </div>
          </div>
      </div>
    </div>
  </div>

    </div>
<LayoutFooter/>
</template>
<style lang="scss" scoped>
.header-box{
    background: #fff;
    position: relative;
    height: 120px;
    // border-bottom:1px solid #ccc;
    display: flex;
    p{
      font-size: 24px;
      margin-left: 20px;
      margin-top: 50px;
    }
    .logo {
    width: 80px;

    a {
      display: block;
      height: 100px;
      width: 100%;
      text-indent: -9999px;
      background: url('@/assets/images/logo.png') no-repeat center 18px / contain;
    }
  }
  .search-box{
    position: absolute;
    display: flex;
    justify-content: center;
    top: 50%;
    right: 20px;
    .el-input {
        margin-left: 20px;
    }
    .el-button{
        margin-left: 20px;
    }
  }
}
 .goods-page {
  margin-top: 20px;
  .goods-info {
    min-height: 500px;
    background: #fff;
    display: flex;

    .media {
      width: 580px;
      height: 500px;
      padding: 30px 50px;
    }

    .spec {
      flex: 1;
      padding: 30px 30px 30px 0;
    }
    .number-box {
    display: flex;
    align-items: center;

    .label {
      width: 60px;
      color: #999;
      padding-left: 10px;
    }
  }

  .g-name {
    font-size: 22px;
  }

  .g-desc {
    color: #999;
    margin-top: 10px;
  }

  .g-price {
    margin-top: 10px;

    span {
      &::before {
        content: "¥";
        font-size: 14px;
      }

      &:first-child {
        color: $priceColor;
        margin-right: 10px;
        font-size: 22px;
      }

    }
  }
  }
  .data-list{
    display: flex;
    padding: 30px 0 30px 0;
  }
  .el-col {
  text-align: center;
  }
  
  .count{
    margin-bottom: 20px;
  }
  .btn{
    margin-top: 10px;
  }

  .goods-footer {
    display: flex;
    margin-top: 20px;
    width: 100%;
  }

  .goods-tabs {
    min-height: 600px;
    background: #fff;
    width: 100%;

    
    img {
      width: 800px;
      height: 800px;
    }
    .title {
      font-size: 24px;
      padding: 20px;
    }
    .desc {
      line-height: 1.8;
      font-size: 18px;
      color: #666;
      padding: 10px;
      margin-left: 10px;
    }
  }
}

.questions{
  line-height: 1.6;
  margin: 20px 0 0 20px;
  

  h3 {
    font-size: 24px;
    margin-bottom: 20px;
  }

  ul, ol {
    list-style-type: none;
    padding: 0;
  }

  li {
    margin-bottom: 15px;
  }

  strong {
    display: block;
    font-size: 18px;
    margin-bottom: 5px;
  }

  p {
    margin: 0;
    font-size: 18px;
    padding: 10px;
    color: #666;
  }

  ol li {
    margin-bottom: 20px;
    font-size: 18px;
    padding-right: 20px;

  }
}

  ::v-deep .el-tabs__nav{
    width: 150px;
  }
    /* 内容文字 */
  ::v-deep .el-tabs__item {
    padding: 20px !important; //内容与padding框的距离
    margin-right: 20px;
    height: 50px;
    font-size: 20px !important; //更改选项卡标签的字体大小
  }
</style>
